<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		.box1{
			background: skyblue;
		}
		.box2{
			color: pink;
		}
		.main{
			font-size: 30px;
		}
	</style>
</head>
<body>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3元素</li>
	<li>4元素</li>
	<li aaa='456'>5元素</li>
</ul>

<div class="main">first</div>
<div>second</div>
<div>third</div>
<button>添加box1</button>
<button>移出box1</button>
<button>添加box2</button>
<button>切换类</button>
<button>判断类</button>
<script type="text/javascript" src="../jquery-3.2.1.js"></script>
<script type="text/javascript">
	//css
	//一条条加
	$('li').css('background','pink')
	.css('color','yellow')

	//多条加
	$('li').css({
		'list-style':'none',
		'font-size':'30px'
	})


	//class操作========================
	$('button').eq(0).click(()=>{
		//添加类名 addClass会保留原来的类名
		$('div').addClass('box1')
	})
	$('button').eq(1).click(()=>{
		//添加类名 removeClass会保留原来的类名
		$('div').removeClass('box1')
	})
	$('button').eq(2).click(()=>{
		//添加类名 addClass会保留原来的类名
		$('div').addClass('box2')
	})
	$('button').eq(3).click(()=>{
		//切换类名 toggleClass切换类名 判断有没有这个类 有就移出没有就添加
		$('div').toggleClass('box1 box2')
	})
	$('button').eq(4).click(()=>{
		//判断类名 hasClass 返回true/false 
		$('div').hasClass('box1 box2')
	})
</script>
</body>
</html>